<template>
    <div class="main">
        <section>
            <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row style="max-width: 800px">
                <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
                </el-table-column>
                <el-table-column align="center" label="小组名称" prop="name" min-width="130"></el-table-column>
                <el-table-column align="center" label="小组组长" prop="groupLeader" min-width="130"></el-table-column>
                <el-table-column align="center" label="操作" min-width="130" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" plain @click="fetchCategoryData(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="小组编辑" :visible.sync="dialogVisible" class="group-edit">
                <el-form :model="formData" size="medium" ref="form" label-width="120px">
                    <el-form-item label="小组名称:" prop="group.name" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.group.name" placeholder="小组名称" maxlength="15"></el-input>
                    </el-form-item>
                    <el-form-item label="小组组长:" prop="group.groupLeader">
                        <el-input v-model="formData.group.groupLeader" placeholder="小组组长" maxlength="15"></el-input>
                    </el-form-item>
                    <el-form-item label="负责品类:" prop="groupCategory">
                        <!--<template v-if="formData.groupCategory">
                            <el-tag v-for="(tag, index) in formData.groupCategory" :key="tag.categoryId" closable @close="delCategory(index)">
                                {{categoryList.find(item => item.categoryId === tag.categoryId).name}}
                            </el-tag>
                        </template>-->
                        <el-table ref="category" :data="categoryList" border fit highlight-current-row @selection-change="handleSelectionChange">
                            <el-table-column align="center" type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="name" label="品类名称" width="120">
                            </el-table-column>
                            <el-table-column prop="group.name" label="所在小组">
                                <template slot-scope="scope" v-if="scope.row.group">
                                    {{scope.row.group.name}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
    export default {
      name: 'groupSetting',
      data(){
        return {
          listQuery: {
            isPage: 1,
            pageSize: 100
          },
          listLoading: true,
          list: [],
          listTotal: 0,

          dialogVisible: false,
          btnLoading: false,
          formData: {
            group: {},
            groupCategory: []
          },
          categoryList: []
        }
      },
      created(){
        this.fetchData()
      },
      methods: {
        fetchData(){
          this.listLoading = true;
          this.request({
            url: '/bi/group/list',
            method: 'get',
            params: this.listQuery
          }).then(({data, totalCount}) => {
            this.list = data;
            this.listTotal = totalCount;
            this.listLoading = false;
          }).catch(err => {
            console.log(err);
            this.list = [];
            this.listTotal = 0;
            this.listLoading = false;
          });
        },
        fetchCategoryData(id){
          this.request({
            url: '/bi/group/getCategoryLIst',
            method: 'get'
          }).then(({data}) => {
            this.categoryList = data ? data.categoryLIstResponse : [];
            this.showEdit(id);
          }).catch(err => {
            console.log(err);
            this.categoryList = [];
          });
        },
        showEdit(id){
          this.request({
            url: `/bi/group/${id}`,
            method: 'get'
          }).then(({data}) => {
            this.formData = data;
            this.dialogVisible = true;
            this.$nextTick(() => {
              this.formData.groupCategory.map(i => {
                this.$refs.category.toggleRowSelection(this.categoryList.find(item => item.categoryId === i.categoryId), true)
              })
            })
          }).catch(err => {
            console.log(err);
            this.formData = {
              group: {},
              groupCategory: []
            }
          });
        },
        handleSelectionChange(data){
          console.log(data)
          this.formData.groupCategory = data.map(item => {
            return {
              groupId: this.formData.group.id,
              categoryId: item.categoryId
            }
          })
        },
        save(){
          this.$refs.form.validate(valid => {
            if (!valid) {
              return false;
            }
            this.btnLoading = true;
            this.request({
              url: '/bi/group/updateGroup',
              method: 'post',
              data: this.formData,
              headers: {
                authorKey: `${this.$route.name}Edit`
              }
            }).then(() => {
              this.$message.success('保存成功');
              this.fetchData();
              this.dialogVisible = false;
              this.btnLoading = false;
            }).catch(err => {
              console.log(err);
              this.btnLoading = false;
            });
          });
        }
      }
    }
</script>
<style lang="scss">
    .group-edit{
        .el-dialog__body{
            padding: 12px;
        }
    }
</style>
